<template>
    <div>
        <mu-appbar style="width: 100%;" color="primary" fixed>
        <mu-button icon slot="left" @click="goback">
            <mu-icon value="reply"></mu-icon>
        </mu-button>
        活动详情
         <mu-menu slot="right">
        <mu-button icon >
            <mu-icon value="more_horiz" ></mu-icon>
        </mu-button>
          <mu-list slot="content">
            <mu-list-item button @click="openinDialog">
              <mu-list-item-title>签到</mu-list-item-title>
            </mu-list-item>
          </mu-list>
        </mu-menu>
        </mu-appbar>
<mu-dialog title="签到"  :open.sync="indialog">
          签到二维码
          <img class="signimg" src="../../assets/images/signin.png" alt="">
          <mu-button slot="actions"  color="primary"  @click="signin">签到</mu-button> <br>
          <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">关闭</mu-button>
        </mu-dialog>
        <div>
            <mu-card class="cards">
            <mu-card-header :title="act.publisher.username" :sub-title="act.publisher.cname">
                <mu-avatar slot="avatar">
                <img :src="avatar">
                </mu-avatar>
            </mu-card-header>
            <mu-card-media  >
                <img :src="act.pic" >
            </mu-card-media>
            <mu-card-title :title="act.title" ></mu-card-title>
            <mu-card-text class="detail">
              【活动内容】<br/>{{act.describe}}    <br/><br/>
              【活动要求】<br/>{{act.requirement}} <br/><br/>
                活动负责人：{{act.contector}} <br/>
                活动地区：{{act.area}}      <br/>
                详细地址：{{act.address}}   <br/>
                活动类型：{{act.type}}      <br/>
                联系电话：{{act.phone}}     <br/>
                活动时间:{{act.starttime | formatDate}} 至 {{act.endtime | formatDate}}   <br/>
            </mu-card-text>
            <mu-card-actions v-if="act.publisher.username!==user.username && act.status==0 && this.endtime>Date.now() ">
                <mu-button color="secondary" @click.native="sign">马上报名</mu-button>
            </mu-card-actions>
            <mu-card-actions v-if="act.publisher.username!==user.username && act.status==1 || this.endtime<=Date.now()">
                <mu-button type="text" >活动已结束</mu-button>
            </mu-card-actions>
            <mu-card-actions v-if="act.publisher.username!==user.username && act.status==2">
                <mu-button type="text" >活动已被删除</mu-button>
            </mu-card-actions>
            <mu-card-actions v-if="act.publisher.username!==user.username && act.status==0 && this.endtime>Date.now()   ">
            </mu-card-actions>
             
            <br>
            </mu-card>
        </div>
        
        <br><br><br>
    </div>
</template>

<script>
import moment from "moment";
import axios from "axios";
import Message from "muse-ui-message";
import Toast from "muse-ui-toast";
import { formatDate } from "../../date/date.js";

export default {
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    }
  },
  data() {
    axios.get("/api/user/signinRequired").then(result => {
      let user = result.data;
      this.un = user.username;
    });
    return {
      act: { publisher: "", signlist: [{ sign: { status: null } }] },
      avatar: "",
      user: "",
      un: "",
      indialog: false
    };
  },
  computed: {
    starttime() {
      return new Date(this.act.starttime).getTime();
    },
    endtime() {
      return new Date(this.act.endtime).getTime();
    }
  },
  beforeCreate() {
    axios
      .get("/api/user/layin", {})
      .then(res => {
        this.user = res.data;
      })
      .catch(err => {
        console.log(err);
      });
    axios.get("/api/user/getUserMsg").then(result => {
      let user = result.data;
      this.avatar = user.avatar;
      this.user = user;
    });
    axios
      .get("/api/activity/getactdetail", {
        params: {
          id: this.$route.query.id
        }
      })
      .then(res => {
        this.act = res.data.data;
        console.log(this.act);
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    //签到
    openinDialog() {
      this.indialog = true;
    },
    closeSimpleDialog() {
      this.indialog = this.outdialog = false;
    },
    signin() {
      console.log(Date.now())
      console.log(this.starttime)
      console.log(Date.now() < this.starttime)
      if (Date.now() < this.starttime || Date.now() > this.endtime) {
        Toast.error("不在活动时间内");
      } else {
        let signTime = moment(Date.now()).format("YYYY-MM-DD HH:mm");
        console.log(this.act._id, this.act.signlist[0]._id);
        axios
          .post("/api/activity/signin", {
            actid: this.act._id,
            actid2: this.act.signlist[0]._id,
            time: signTime
          })
          .then(result => {
            if (result.data == "签到成功") {
              Toast.success("签到成功")
              console.log("签到成功");
            }
          });
      }
    },
    tosignin(index) {
      this.$router.push({
        path: "/signin",
        query: { id: this.acts[index]._id }
      });
    },
    goback() {
      this.$router.go(-1); //返回上一层
    },
    sign() {
      if (this.user) {
        Message.confirm("您确认报名吗?", "确认").then(conresult => {
          if (conresult.result) {
            axios
              .post("/api/activity/signup", {
                id: this.$route.query.id
              })
              .then(res => {
                Toast.success("报名成功，请留意系统通知");
              })
              .catch(err => {
                console.log(err);
                Toast.error("报名失败");
              });
          } else {
            Toast.error("您取消了报名");
          }
        });
      } else {
        Toast.error("请先登录");
      }
    }
  }
};
</script>

<style>
.detail {
  text-align: left;
  margin-left: 1rem;
}
p {
  margin-left: 10px;
  margin-right: 10px;
}
.signimg {
  width: 100%;
}
</style>
